<script setup>
/**
 * 这是个布局组件
 * 分为 左侧菜单、中间内容、右侧菜单
 */
defineProps({
  stickyLeft: {
    type: Boolean,
    default: false,
  },
  stickyRight: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <AppPage full :main-style="{ margin: '0' }">
    <slot name="header" />
    <div class="m-a mt-20 h-full max-w-1200 flex flex-1">
      <aside
        class="mobile-hidden mr-20 h-fit max-w-180"
        :class="stickyLeft ? 'side-menu' : ''"
      >
        <slot name="left-sidebar" />
      </aside>
      <div class="w-full flex flex-1">
        <main class="main-content min-w-0 flex-1">
          <slot name="main-content" />
        </main>
        <aside
          class="mobile-hidden-right ml-20 h-fit w-260 flex-shrink-0"
          :class="stickyRight ? 'side-menu' : ''"
        >
          <slot name="right-sidebar" />
        </aside>
      </div>
    </div>
  </AppPage>
</template>

<style scoped>
@media (max-width: 1024px) {
  .mobile-hidden {
    display: none;
  }
  .main-content {
    margin-right: 0 !important; /* 移除间距 */
  }
}
@media (max-width: 900px) {
  .mobile-hidden-right {
    display: none;
  }
  .main-content {
    max-width: 100%;
  }
}
.side-menu {
  position: sticky;
  top: 20px; /* 可以根据需要调整与顶部的距离 */
}
</style>
